iT邦幫忙

2023 iThome 鐵人賽

DAY 3
0

承續上篇 API請求

在前端串API的時候很常遇到跟後端搭配的問題。並不是說後端真的常常有問題。而是要釐清bug究竟出在哪裡,
每次API出問題,要切三塊檢查前端,網路,後端

  1. 前端呼叫正確API路由
  2. 呼叫夾帶正確資料
  3. 網路可以運行
  4. 後端接收成功
  5. (後端運算不關前端的事情)
  6. 接收,檢查回應資料

檢查API

今天要介紹PostMan 超級好用的檢查api的功能,推薦使用電腦版,會自動優先使用本地路由。很多時候是內網開發功能。

  1. 在PostMan 先選擇工作群組
  2. 新增Collection api群組
  3. 新增api
    https://ithelp.ithome.com.tw/upload/images/20230912/20158340KfD5MTtZya.jpg

創建一個API

1. 命名

2. 選擇Method請求類型

3. 路由

https://ithelp.ithome.com.tw/upload/images/20230912/20158340yItBa8AnG2.jpg

4. 參數 看是要放在網址(Params) 還是放在Body 還是 Hearders 任君挑選

https://ithelp.ithome.com.tw/upload/images/20230912/20158340Xbrk2BwO49.jpg

5. 至於常常用到的Token 放在Authorization

https://ithelp.ithome.com.tw/upload/images/20230912/20158340u02tdjwvHx.jpg

6. Save儲存(請經常儲存)

7. Send送出 看看回應的結果


PostMan小技巧

一般Postman教學到這裡了,但是看我的畫面裡面有橘色的 {{參數}} 可以想像他的潛力吧
這邊就是我自己覺得超好用的小方法

新增參數

到Collection > Variables 新增 "參數" 然後Save儲存
https://ithelp.ithome.com.tw/upload/images/20230912/201583403PXRbEPp3O.jpg

就可以輸入 {{你的自訂參數}} 引用了 超級好用

設定全域Token

在Collection設定 Authorization 設定你的Token
在其他API設定inheirt 繼承自Collection 就不用測試多個API時候 一個個設定Token

自動更新Token

  1. 讓PostMan送出登入的API時 自動更新Token
    最後我自己超級常用 但是當時想寫出來爬文很久的 登入自動帶入Token
    結合剛剛的1. 新增Token參數 2.在每個要用到Token的API設定inheirt
    在登入的API > Tests
    https://ithelp.ithome.com.tw/upload/images/20230912/20158340l7gyfuyNaK.jpg
pm.test("Write Token", function () {
    var jsonData = pm.response.json();
    pm.expect(jsonData.data.token).not.eq(undefined);
    /*實際jsonData.data.token 應該參考實際回應數值調整*/
    pm.collectionVariables.set("bearToken", newToken);
});

這樣每次只要在登入API按Send 自動帶入新Token,超級方便


另外PostMan可以將整個Collection的內容輸出成api文件。

  1. 在你的Collection > overview
  2. 區塊下面的"View complete documentation →"
  3. 檢查一下是不是你要輸出的Collection
  4. 右上角 Publish 後續按照下一步

上一篇
Ch7. React 呼叫ajax外部API支援
下一篇
Ch9. 專案Git管理
系列文
React前端開發 - 安裝,coding ,架設 - ver. React 17以下14
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言